<template>
  <div class="apply">
    <Navigation :logoName="logoName" :routeInfo="routeInfo"></Navigation>
    <div>
        
      <div class="filter chartfilter">
        <div class="chartshow">
          <h2>案件受理统计</h2>
          <div id="acceptStatic"></div>
        </div>
        <div class="chartshow">
          <h2>案件处理趋势</h2>
          <div id="dealTrend"></div>
        </div>
        <div class="chartshow">
          <h2>案件处理进度</h2>
          <div id="caseProcess"></div>
        </div>
        <div class="chartshow">
          <h2>案件概览</h2>
          <div id="caseOverview">
            <div class="contentview acceptTotal">
              <div><span class="numTotal">{{overviewList&&overviewList.caseTotalCount}}</span>件</div>
              <div><icon class="acceptTotalIcon"></icon>案件受理总数</div>
            </div>
            <div class="contentview amontTotal">
              <div><span class="numTotal">{{overviewList&&overviewList.caseTotalAmount}}</span>万元</div>
              <div><icon class="amontTotalIcon"></icon>涉案金额总数</div>
            </div>
            <div class="contentview caseProfit">
              <div><span class="numTotal">{{overviewList&&overviewList.caseEarnings}}</span>元</div>
              <div><icon class="profitIcon"></icon>案件收益</div>
            </div>
            <div class="contentview averageCycle">
              <div><span class="numTotal">{{overviewList&&overviewList.caseTerminate}}</span>件</div>
              <div><icon class="averageCycleIcon"></icon>终止案件数量</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table tablecontent tableshow">
        <div class="filter listfilter">
        <div class="fonttitle">筛选</div>
        <div class="filterCon">
          提交状态&nbsp;&nbsp;&nbsp;<Select style="width:200px" v-model="submitStatus">
              <Option value="1" key="1">专员提交</Option>
              <Option value="2" key="2">主任提交</Option>
              <Option value="3" key="3">仲裁提交</Option>
          </Select>
          <span class="applyTime">受理时间&nbsp;&nbsp;&nbsp;
            <DatePicker type="datetimerange" placeholder="请选择日期" style="width:350px" @on-change='datepicker'></DatePicker>
          </span>
          <span class="applyTime">涉案金额&nbsp;&nbsp;&nbsp;
            <InputNumber
            v-model="casestartAmont"
            style="width:150px"
            size="default"
            :min="1"></InputNumber>&nbsp;-
            <InputNumber
            v-model="caseendAmont"
            style="width:150px"
            size="default"
            :min="1"></InputNumber>
          </span>
          
          <span class="btn" @click="filterCase()">筛选</span>
        </div>
      </div>
        <div class="titlename">
          <div class="fonttitle">案件列表</div>
        </div>
        <div class="tableContentStatic">
          <Table ref="selection" :loading="loading" height="242" :columns="columns7" :data="data6"></Table>
        </div>
        <div class="page-show"><Page :total="totalSize" :current="current" @on-change="pagechange" :page-size="8"/></div>
      </div>
    </div>
    
  </div>
  
</template>

<script>
// import { Chart,Util } from '@antv/g2';
import { Column,Line,Pie } from '@antv/g2plot';
import Navigation from '../common/navigation'
export default {
  name: 'ApplyIndex',
  data(){
     return {
       logoName:'统计分析',
       routeInfo:'首页/统计分析',
       selectInfos:[],
       resName:'',
       uploadurl:'/api2'+this.urls.uploadApplicantFile,
       loading:true,
       submitStatus:'1',
       startTime:'',
       endTime:'',
       casestartAmont:0,
       caseendAmont:0,
       current:1,
       filterNum:'',
       isshow:false,
       caseNo:'',
       overviewList:{},
       totalSize:0,
       columns7: [
                    {
                        title: '序号',
                        width: 50,
                        key: 'id'
                    },
                    {
                        title: '案件编号',
                        width: 120,
                        key: 'caseNo',
                        render: (h, params) => {
                          let param=params.row.caseNo;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=25?param.substr(0,25)+'...':param)])
                        }
                    },
                    {
                        title: '申请人',
                        key: 'appName',
                        width:110,
                        render: (h, params) => {
                          let param=params.row.appName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '申请人代理人',
                        key: 'appLawyerName',
                        width:120,
                        render: (h, params) => {
                          let param=params.row.appLawyerName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '被申请人',
                        key: 'resName',
                        width:110,
                        render: (h, params) => {
                          let param=params.row.resName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '被申请人代理人',
                        key: 'resLawyerName',
                        width:140,
                        render: (h, params) => {
                          let param=params.row.resLawyerName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '第三人',
                        key: 'dsfName',
                        width:120,
                        render: (h, params) => {
                          let param=params.row.dsfName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '第三方代理人',
                        key: 'dsfLawyerName',
                        width:120,
                        render: (h, params) => {
                          let param=params.row.dsfLawyerName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '接收时间',
                        width: 170,
                        key: 'acceptTime'
                    },
                    {
                        title: '涉案金额',
                        key: 'amountDispute',
                        width: 110
                    },
                    {
                        title: '案由',
                        key: 'caseReason',
                        width: 150,
                        render: (h, params) => {
                          let param=params.row.caseReason;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=13?param.substr(0,13)+'...':param)])
                        }
                    },
                    {
                        title: '受理时间',
                        key: 'acceptTime',
                        width: 170
                    },
                    {
                        title: '审核状态',
                        key: 'status',
                        width: 100,
                        render: (h, params) => {
                          return h('div', [
                                h('span', {
                                },this.submitStatus==1? params.row.status==1?'已审核':
                                (params.row.status==2?'审核未通过':
                                (params.row.status==4?'待缴费':
                                (params.row.status==5?'已缴费':'未审核'))):(this.submitStatus==2?
                                params.row.status==1?'已审核':(params.row.status==2?'审核未通过':'未审核'):(
                                  this.submitStatus==3?params.row.status==1?'已审核':
                                  (params.row.status==2?'已裁决':'未审核'):'')
                                )
                                )])
                        }
                    }, 
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.detail(params)
                                        }
                                    }
                                }, '查看')
                            ])
                        }
                    }
                ],
                data6: []
            }
  },
  props: {
    msg: String
  },
  methods:{
    caseProcess(data){
        function renderStatistic() {}
        let piePlot = new Pie('caseProcess', {
          appendPadding: 10,
          data,
          angleField: 'caseNumber',
          colorField: 'submitPlatformTime',
          radius: 1,
          height:250,
          autoFit: true,
          innerRadius: 0.64,
          meta: {
            caseNumber: {
              formatter: (v) => `${v} %`,
            },
          },
          label: {
            type: 'inner',
            offset: '-50%',
            style: {
              textAlign: 'center',
            },
            autoRotate: false,
            content: '{value}%',
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                let { width, height } = container.getBoundingClientRect();
                let d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                let text = datum ? datum.submitPlatformTime : '';
                return renderStatistic(d, text, { fontSize: 28 });
              },
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '32px',
              },
              customHtml: (container, view, datum, data) => {
                let { width } = container.getBoundingClientRect();
                let text = datum ? `${datum.caseNumber}%` : `${data.reduce((r, d) => r + d.caseNumber, 0)}%`;
                return renderStatistic(width, text, { fontSize: 32 });
              },
            },
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
        });

        piePlot.render();
    },
    acceptStatic(data){
      let columnPlot = new Column('acceptStatic', {
        data,
        xField: 'submitPlatformTime',
        yField: 'caseNumber',
        height:250,
        autoFit: true,
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          caseNumber: {
            alias: '案件数量',
          },
        }
      });
      columnPlot.render();
    },
    dealTrend(data){
        let linePlot = new Line('dealTrend', {
          data,
          xField: 'year',
          yField: 'gdp',
          seriesField: 'name',
          height:250,
          autoFit: true,
          legend: {
            position: 'top',
          },
          smooth: true,
          // @TODO 后续会换一种动画方式
          animation: {
            appear: {
              animation: 'path-in',
              duration: 5000,
            },
          }
        });
      linePlot.render();
    },
    pagechange(param){
      this.filterCase(param)
    },
    datepicker(param){
       this.startTime=param[0];
       this.endTime=param[1];
    },
    filterCase(param=1){
         let params='?pageNum='+param+'&pageSize=8&startTime='+this.startTime
                    +'&endTime='+this.endTime+'&type='+this.submitStatus
                    +'&amountDispute1='+(this.casestartAmont?this.casestartAmont:'')+'&amountDispute2='
                    +(this.caseendAmont?this.caseendAmont:'');
        
         this.current=param;
         this.list(params)
    },
    detail(param){
       
        if(this.submitStatus==1){
            this.$router.push({name:'commissionerDetail',params:{caseno:param.row.caseNo}});
        }else if(this.submitStatus==2){
            this.$router.push({name:'directorDetail',params:{caseno:param.row.caseNo}});
        }else if(this.submitStatus==3){
          this.$router.push({name:'arbitratorDetail',params:{caseno:param.row.caseNo}});
        } 
             
    },
    list(param='?pageNum=1&pageSize=8&type=1'){
      this.$http.post('/api2'+this.urls.getCases+param).then((result)=>{
            if(result.data.code==200&&result.data.data.list.length>0){
                this.loading=false;
                this.data6=result.data.data.list;
                this.totalSize=result.data.data.total;
            }else{
              this.loading=false;
              this.totalSize=0;
              this.data6=[];
            }
      }) 
    },
    staticAnalysis(){
       this.$http.post('/api2'+this.urls.getStatisticsData).then((result)=>{
            if(result.data.code==200){
              this.overviewList=result.data.data.overviewList[0]?result.data.data.overviewList[0]:{};
              this.acceptStatic(result.data.data.list.length>0?result.data.data.list:[]);
              this.dealTrend(result.data.data.trendList.length>0?result.data.data.trendList:[]);
              this.caseProcess(result.data.data.progressList.length>0?result.data.data.progressList:[]);
            }else{
              this.$Message.warning('网络错误');
            }
      }) 
    }
  },
  components:{Navigation},
  mounted(){
      this.staticAnalysis();
      this.list();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .chartfilter{
    display: flex;
    justify-content: space-between;
    /* display: grid;
    grid-auto-flow: column;
    grid-column-gap: 16px; */
    padding:0;
    height: 310px;
    background: inherit;
  }
  .chartshow{
    height:312px;
    background:#fff;
    width: 444px;
    padding: 18px;
  }
  .contentview{
    height:116px;
    color: #fff;
    text-align: center;
    padding: 22px;
  }
  .titlename{
    padding-top:0;
  }
  .tableContentStatic{
    margin-top: 10px;
  }
  .tableshow{
    height:448px;
  }
  #caseOverview{
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: 48% 48%;
    column-gap: 18px;
    row-gap: 12px;
  }
  .acceptTotal{
    background: url('../../assets/acceptTotal.png') no-repeat;
    background-size: 100% 100%;
  }
  .amontTotal{
    background: url('../../assets/amontTotal.png') no-repeat;
    background-size: 100% 100%;
  }
  .caseProfit{
    background: url('../../assets/caseProfit.png') no-repeat;
    background-size: 100% 100%;
  }
  .averageCycle{
    background: url('../../assets/averageCycle.png') no-repeat;
    background-size: 100% 100%;
  }
  .acceptTotalIcon{
    background: url('../../assets/acceptIcon.png') no-repeat;
    width: 22px;
    height: 21px;
    margin-right: 6px;
    vertical-align: sub;
  }
  .amontTotalIcon{
    background: url('../../assets/amontIcon.png') no-repeat;
    width: 22px;
    height: 21px;
    margin-right: 6px;
    vertical-align: sub;
  }
  .profitIcon{
    background: url('../../assets/caseProfitIcon.png') no-repeat;
    width: 22px;
    height: 21px;
    margin-right: 6px;
    vertical-align: sub;
  }
  .averageCycleIcon{
    background: url('../../assets/averageIcon.png') no-repeat;
    width: 22px;
    height: 21px;
    margin-right: 6px;
    vertical-align: sub;
  }
  .numTotal{
    font-size: 30px;
  }
  .notifypay{
    display: inline-block;
    background: #2e37cb !important;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 12px;
    color: #fff !important;
    font-size: 14px;
    cursor: pointer;
  }
  .listfilter{
    padding-left:0;
  }
  /* .btn-back{
    background: #e6e6e6 !important;
    color: #000 !important;
    width: 120px;
    height: 44px;
    line-height: 44px;
  } */
  .noSelect{
    background: #fff;
    color:#2e37cb;
    border: 1px solid #2e37cb;
    display: inline-block;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 12px;
    font-size: 14px;
    cursor: pointer;
  }
  .fonttitle{
    font-size: 16px;
  }
  .btn{
    background: #2e37cb;
    color: #fff;
    line-height: 30px;
    width: 120px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
    text-align: center;
    cursor: pointer;
  }
  .mulplebtn-apply{
     background:#1aa864 !important;
  }
  .filterCon{
    margin: 20px;
  }
  .applyTime{
    margin: 0 40px;
  }
</style>
